<template>
    <div>
        <el-card class="box-card">
            <div slot="header" class="clearfix">


            <span class="demo-type">
                <el-avatar :size="80" @error="errorHandler">
                    <img :src='storeInfo.storeIcon'/>
                </el-avatar>
                <el-button type="text" @click='editStoreIconButton'>修改店铺图片</el-button>
            </span>

                <el-button style="float: right;" size='medium' @click='changeStoreStatus' :type='getType'>
                    {{getStatus}}
                </el-button>

            </div>


            <el-descriptions class="margin-top" :storeInfo='storeInfo' :column="2" :size="size" border>
                <template slot="extra">
                    <el-button type="primary" @click='editStoreInfo' size="small">修改店铺信息</el-button>
                </template>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-user"></i>
                        店铺评分
                    </template>
                    {{ storeInfo.storeScore }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-user"></i>
                        店铺成交量
                    </template>
                    {{ storeInfo.orderQuantity }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-user"></i>
                        店铺名
                    </template>
                    {{ storeInfo.storeName }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-mobile-phone"></i>
                        店铺电话
                    </template>
                    {{ storeInfo.storePhone }}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-location-outline"></i>
                        店铺地址
                    </template>
                    {{ storeInfo.storeAddress }}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-location-outline"></i>
                        店铺营业时间
                    </template>
                    {{ storeInfo.storeOpenTime }}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-location-outline"></i>
                        店铺公告
                    </template>
                    {{ storeInfo.storeNotice }}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-location-outline"></i>
                        店铺类型
                    </template>
                    {{ storeInfo.storeType }}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-location-outline"></i>
                        起送金额
                    </template>
                    {{ storeInfo.minPrice }}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-location-outline"></i>
                        配送费
                    </template>
                    {{ storeInfo.postPrice }}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-location-outline"></i>
                        店铺创建时间
                    </template>
                    {{ storeInfo.createTime }}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-location-outline"></i>
                        上次修改时间
                    </template>
                    {{ storeInfo.updateTime }}
                </el-descriptions-item>

            </el-descriptions>

        </el-card>


        <!-- Form -->

        <el-dialog title="修改店铺信息" :visible.sync="dialogFormVisible">

            <el-card class="box-card">
                <el-form :model="editInfo" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                    <el-form-item label="店铺名" prop="name">
                        <el-input required='required' type='text' maxlength="32" show-word-limit
                                  v-model="editInfo.storeName"></el-input>
                    </el-form-item>
                    <el-form-item label="店铺电话" prop="name">
                        <el-input type='text' maxlength='64' show-word-limit v-model="editInfo.storePhone"></el-input>
                    </el-form-item>
                    <el-form-item label="店铺地址" prop="name">
                        <el-input type='textarea' maxlength='128' show-word-limit
                                  v-model="editInfo.storeAddress"></el-input>
                    </el-form-item>
                    <el-form-item label="店铺营业时间" prop="name">
                        <el-input type='text' maxlength='128' show-word-limit
                                  v-model="editInfo.storeOpenTime"></el-input>
                    </el-form-item>
                    <el-form-item label="店铺公告" prop="name">
                        <el-input type='textarea' maxlength='300' show-word-limit
                                  v-model="editInfo.storeNotice"></el-input>
                    </el-form-item>
                    <el-form-item label="店铺类型" prop="name">
                        <el-input type='textarea' maxlength='128' show-word-limit
                                  v-model="editInfo.storeType"></el-input>
                    </el-form-item>
                    <el-form-item label="起送金额" prop="name">
                        <el-input-number v-model="editInfo.minPrice" :min="0" :max="10000000" :step='0.01'
                                         :controls="false" :precision="2"></el-input-number>
                    </el-form-item>
                    <el-form-item label="配送费" prop="name">
                        <el-input-number v-model="editInfo.postPrice" :min="0" :max="10000000" :step='0.01'
                                         :controls="false" :precision="2"></el-input-number>
                    </el-form-item>
                </el-form>
            </el-card>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click='updateStoreInfo()'>提 交</el-button>
            </div>
        </el-dialog>


        <el-dialog title="修改店铺图片" :visible.sync="editIconV">

            <el-card class="box-card">

                <el-upload action="" :on-change="uploadImg"
                           :limit="1"
                           :on-exceed="exceedM"
                           :auto-upload="false"
                           list-type="picture-card">
                    <i class="el-icon-plus"></i>
                </el-upload>
                <!--            <img style="margin-left: 15px" v-if="imageUrl" :src="imageUrl" class="avatar">-->

                <!--            <el-form  :rules="rules"  ref="ruleForm" label-width="100px" class="demo-ruleForm">-->

                <!--                <el-form-item label="店铺图片(请复制图片连接到此处)" prop="name">-->
                <!--                    <el-input type='text' maxlength='512' show-word-limit v-model="storeIcon"></el-input>-->
                <!--                </el-form-item>-->
                <!--            </el-form>-->
            </el-card>
            <div slot="footer" class="dialog-footer">
                <el-button @click="editIconV = false">取 消</el-button>
                <el-button type="primary" @click='editStoreIconMethod()'>提 交</el-button>
            </div>
        </el-dialog>


    </div>
</template>

<script>
    import axios from "axios";

    export default {

        data() {
            return {
                aa: false,
                imageUrl: '',
                tempUrl: '',
                storeIcon: '',
                editIconV: false,
                dialogFormVisible: false,
                size: 'medium',
                storeInfo: '',
                editInfo: {
                    storeName: '',
                    storePhone: '',
                    storeAddress: '',
                    storeOpenTime: '',
                    storeNotice: '',
                    storeType: '',
                    minPrice: 2.00,
                    postPrice: 2.00
                },
                rules: {
                    // name: [
                    //     { required: true, message: '请输入活动名称' },
                    // ]
                }
            }
        },
        created() {
            //获取店铺信息
            const _this = this;
            this.$http.get('/dev-api/seller/store/info')
                .then(function (resp) {
                    _this.storeInfo = resp.data.data;
                })
        },
        computed: {
            getStatus() {
                return this.storeInfo.storeStatus === true ? '营业中' : '休息中';
            },
            getType() {
                return this.storeInfo.storeStatus === true ? 'success' : 'info';
            }
        },
        methods: {

            getStoreInfo() {
                //获取店铺信息
                const _this = this;
                this.$http.get('dev-api/seller/store/info')
                    .then(function (resp) {
                        _this.storeInfo = resp.data.data;
                    })
            },
            errorHandler() {
                return true
            },
            //修改店铺营业状态
            changeStoreStatus() {
                const _this = this;
                this.$confirm('修改店铺营业状态, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {

                    _this.$http.put('dev-api/seller/store/status')
                        .then(function (resp) {
                            _this.storeInfo.storeStatus = !_this.storeInfo.storeStatus;
                            _this.$message({
                                type: 'success',
                                message: '修改成功!'
                            });
                        })

                }).catch(() => {
                    _this.$message({
                        type: 'info',
                        message: '已取消'
                    });

                })
            },
            //修改店铺信息
            editStoreInfo() {
                this.dialogFormVisible = true;
                this.editInfo.storeName = this.storeInfo.storeName;
                this.editInfo.storePhone = this.storeInfo.storePhone;
                this.editInfo.storeAddress = this.storeInfo.storeAddress;
                this.editInfo.storeOpenTime = this.storeInfo.storeOpenTime;
                this.editInfo.storeNotice = this.storeInfo.storeNotice;
                this.editInfo.storeType = this.storeInfo.storeType;
                this.editInfo.minPrice = this.storeInfo.minPrice;
                this.editInfo.postPrice = this.storeInfo.postPrice;
            },
            //提交店铺修改信息
            updateStoreInfo() {
                const _this = this;
                this.$http.post("dev-api/seller/store/update", this.editInfo)
                    .then(function (resp) {
                        if (resp.data.code === 0) {
                            _this.$message.success("修改店铺信息成功");
                            _this.dialogFormVisible = false;
                            //刷新数据
                            _this.getStoreInfo();
                        } else {
                            _this.$message.error(resp.data.msg);
                        }
                    }).catch(() => {
                        _this.$message.error("失败");
                    }
                )
            },
            editStoreIconButton() {
                this.editIconV = true;
            },
            editStoreIconMethod() {
                const _this = this;
                let form = {
                    storeIcon: this.imageUrl
                }

                this.$http.post('dev-api/seller/store/updateIcon/', form)
                    .then(function (resp) {
                        if (resp.data.code === 0) {
                            _this.$message.success('修改成功')
                            _this.editIconV = false
                            _this.getStoreInfo()

                        } else {
                            _this.$message.error(resp.data.msg)
                        }
                    })
            },
            uploadImg(file, fileList) {
                const _this = this;
                let fileType = file.name.substring(file.name.lastIndexOf('.') + 1);
                if (fileType !== 'jpg' && fileType !== 'png' && fileType !== 'jpeg') {
                    this.$message.error('头像格式不正确')
                    return false;
                }
                if (file.size / 1024 / 1024 > 2) {
                    this.$message.error('头像大小不能大于2M')
                    return false;
                }
                console.log(file, fileList)
                let formdata = new FormData()
                formdata.append("file", file.raw)

                this.$http.post('img-serve/img/upload', formdata)
                    .then(function (resp) {
                        if (resp.data.code === 0) {
                            _this.$message.success('上传成功')
                            _this.imageUrl = resp.data.data;
                            console.log(_this.imageUrl)
                        } else {
                            _this.$message.error('上传失败')
                        }
                    })

            },
            exceedM(files, fileList) {
                this.$message.error('只能上传一张图片')
            }

        }
    }
</script>

<style>
    .text {
        font-size: 14px;
    }

    .item {
        margin-bottom: 18px;
    }

    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }

    .clearfix:after {
        clear: both
    }

    .box-card {
        width: 100%;
    }

    .avatar {
        width: 178px;
        height: 178px;
        display: flex;
    }
</style>
